<template>
  <ul class="classify">
    <li
      v-for="(item, index) in icons"
      :key="index"
      @click="$router.push(item.link)"
    >
      <img :src="item.imgsrc" alt="" />
      <span>{{ item.icontext }}</span>
    </li>
  </ul>
</template>

<script>
import { defineComponent } from 'vue'
export default defineComponent({
  data() {
    return {
      icons: [
        {
          imgsrc:
            'https://p0.meituan.net/wmbanner/c6213db2a0bbc6b7342074e9eb51ca4a12844.png',
          icontext: '美食',
          link: 'shopCategory'
        },
        {
          imgsrc:
            'https://p0.meituan.net/wmbanner/8934983cf94fee9b898ffb66316d312d6588.png',
          icontext: '超市便利',
          link: ''
        },
        {
          imgsrc:
            'https://p0.meituan.net/wmbanner/931b4bfa92a37d0f8c42b846f7d7c3b310738.png',
          icontext: '甜点饮品',
          link: ''
        },
        {
          imgsrc:
            'https://p0.meituan.net/wmbanner/84154e5477cc35b12d0e31d55924edb916525.png',
          icontext: '生鲜果蔬',
          link: ''
        },
        {
          imgsrc:
            'https://p0.meituan.net/wmbanner/58ffd634fa6dddf05972d2cf2c57733f14610.png',
          icontext: '鲜花蛋糕',
          link: ''
        },
        {
          imgsrc:
            'https://p0.meituan.net/wmbanner/1788652acdf4235133d86ca890b4d90c17647.png',
          icontext: '晚餐优选',
          link: ''
        },
        {
          imgsrc:
            'https://p0.meituan.net/wmbanner/325483c15c7e9550a43c917510bfcc6612958.png',
          icontext: '美团专送',
          link: ''
        },
        {
          imgsrc:
            'https://p0.meituan.net/wmbanner/a21e2929ba2fa539323ef830260e9fd214345.png',
          icontext: '快食简餐',
          link: ''
        },
        {
          imgsrc:
            'https://p0.meituan.net/wmbanner/75a5651f759810f28d6365242f0095fe16728.png',
          icontext: '汉堡披萨',
          link: ''
        },
        {
          imgsrc:
            'https://p1.meituan.net/wmbanner/fee33972115b6dbc8f0450c9c015712b16444.png',
          icontext: '异国料理',
          link: ''
        }
      ]
    }
  }
})
</script>

<style lang="scss" scoped>
.classify {
  display: flex;
  height: 1.62rem;
  flex-flow: wrap;
  // width: 100%;
  margin-bottom: 0.1rem;
  li {
    width: 20%;
    list-style: none;
    height: 0.81rem;
    display: flex;
    text-decoration: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    span {
      font-size: 0.12rem;
      margin-top: 0.03rem;
      color: black;
    }
    img {
      width: 0.49rem;
      height: 0.49rem;
    }
  }
}
</style>
